<template>
	<view class="container">
		<view class="select">
			<view class="count">共3条</view>
			<view class="status">状态</view>
			<view class="options">
				<uni-combox :border="false" :candidates="candidate" v-model="statusValue" @change="change" />
			</view>
			<view class="mode">方式</view>
			<view class="options">
				<uni-combox :border="false" :candidates="candidates" v-model="modeValue" @change="onChange" />
			</view>
			<view class="time">
				<!-- <uni-datetime-picker v-model="single">
				<image src="@/static/日历.png" />日期
				 <view class="counts">日期</view> -->
				<!-- </uni-datetime-picker> -->
				<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick">
					<image src="@/static/日历.png" />日期
				</uni-datetime-picker>
			</view>
		</view>

		<view class="detail" v-for="item in RepairInfoList" :key="item.id">
			<view class="one">
				<view class="number">维修单号：</view>
				<view class="numbers">{{item.id}}</view>
				<navigator class="conducted" :url="'/pages/index/repair/detail/detail?id=' + item.id"
					hover-class="no-shadow">
					<template v-if="item.status === 0">已预约</template>
					<template v-else-if="item.status === 1">进行中</template>
					<template v-else-if="item.status === 2">已完成</template>
				</navigator>
			</view>
			<view class="one">
				<view class="number">维修方式：</view>
				<view class="numbers">{{item.type}}</view>
			</view>
			<view class="one">
				<view class="number">预约日期：</view>
				<view class="numbers">{{item.reservationTime}}</view>
				<navigator :url="'/pages/index/repair/detail/detail?id=' + item.id" hover-class="no-shadow">
					<button class="button"><text class="button-text">查看详情</text></button>
					<yfx-tooltip ref="tooltip"></yfx-tooltip>
				</navigator>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				range: [],
				single: [],
				statusValue: '待服务',
				candidate: ['全部', '进行中', '已完成'],
				modeValue: '全部',
				candidates: ['全部', '到店维修', '上门取车'],
				RepairInfoList: {},
			}
		},
		onShow() {
			this.getRepairInfo();
		},
		onLoad() {
			this.getRepairInfo();
			this.getToken();
			// // 添加页面加载监听
			// uni.onShow(() => {
			// 	this.getRepairInfo();
			// });
		},
		watch: {
			range(newval) {
				console.log('范围选:', this.range);
			},
			datetimerange(newval) {
				console.log('范围选:', this.datetimerange);
			}
		},
		methods: {


			getToken() {
				uni.request({
					url: 'http://localhost:8080/auth/login',
					method: 'POST',
					data: {
						username: "admin",
						password: "admin123" // 这里修正了单词拼写错误，将“paaword”改为“password”
					},
					success(res) {
						if (res.data.code === 200) {
							uni.setStorageSync('token', res.data.data.access_token);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: '服务器繁忙',
							duration: 2000
						});
					}
				});
			},
			// 查询维修预约信息
			getRepairInfo() {
				// 发送请求
				uni.request({
					url: 'http://localhost:8080/merchant/reservation/list',
					method: 'GET',
					header: {
						'Content-Type': 'application/json', // 设置请求头为 JSON 格式
						'Authorization': 'Bearer ' + wx.getStorageSync('token') // 设置认证令牌
					},
					success: (res) => {
						console.log(res)
						if (res.data.code === 200) {
							this.RepairInfoList = res.data.rows
							// console.log(this.RepairInfoList)
						} else {
							console.error('请求失败', res);
						}
						this.showSuccessMsg = true;
						this.successMsg = '查询成功！';
					}
				});
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			change(e) {
				console.log("e:", e);
			},
			onChange(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.select {
		width: 740rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
	}

	.count {
		font-size: 24rpx;
		color: rgba(16, 16, 16, 1);
		margin-top: 10rpx;
	}

	.status {
		font-size: 24rpx;
		color: rgba(16, 16, 16, 1);
		margin-top: 10rpx;
		margin-left: 20rpx;
	}

	.mode {
		font-size: 24rpx;
		color: rgba(16, 16, 16, 1);
		margin-top: 10rpx;
		margin-left: 7rpx;
	}

	.options {
		width: 160rpx;
		height: 40rpx;
		margin-right: 25rpx;
	}

	.time {
		display: flex;
		width: 120rpx;
		margin-left: 15rpx;
		vertical-align: middle;
		margin-top: 10rpx;
	}

	.time image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}

	.counts {
		font-size: 24rpx;
		color: rgba(16, 16, 16, 1);
		line-height: 80rpx;
		margin-top: 15rpx;
		margin-left: 7rpx;
	}

	.detail {
		margin: 20rpx;
		height: 210rpx;
		border-bottom: 1rpx solid rgba(206, 206, 206, 0.81);
	}

	.one {
		display: flex;
		font-size: 28rpx;
	}

	.number {
		width: 160rpx;
		margin: 10rpx 0;
	}

	.numbers {
		margin-left: 10rpx;
		width: 300rpx;
		margin: 10rpx 0;
	}

	.conducted {
		color: #1D6FFF;
		width: 140rpx;
		margin-top: 10rpx;
		text-align: center
	}

	.button {
		width: 180rpx;
		height: 60rpx;
		border-radius: 22rpx;
		margin-left: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: rgba(85, 122, 214, 1);
		color: rgba(255, 255, 255, 1);
	}

	.button-text {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 1);
	}
</style>